<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css_布局小技巧</title>
    <style>
        .parent{
            background-color: orange;
            height: 500px;
            width: 500px;
            text-align: right;
        }
        .box1{
            height: 200px;
            width: 200px;
            background-color: turquoise;
        }
    </style>
</head>
<body>
<!--
    布局小技巧
        1.行内元素、行类块元素，可以被父元素当作文本处理
            可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。
            例如： text-align、line-height、text-indent 等。
        2.如何让子元素,在父元素水平居中：
            1.若子元素为块元素，给父元素加上:margin:0 auto;
            2.若子元素为行内元素、行内块元素，给父元素加上:text-align:center;
        3.如何让子元素,z在父元素垂直居中：
            1.若子元素为块元素，给子元素加上:margin-top,值为:(父元素content - 子元素盒子总高)/2。
            2.若子元素为行内元素、行内块元素：
                让父元素的height = line-height,每个子元素都加上:vertical-align:middle;
                补充：若想要绝对垂直居中，父元素font-size:0;
        3.元素之间的空白间隙
            产生原因：
                行内元素、行内块元素，彼此之间的换行会被浏览器解析成一个空白字符
                解决方案：
                    1，去掉换行和空格（不推荐）
                    2.给父元素设置font-size:0,再给需要显示文字的元素单独设置字体大小（推荐）
        4.行内块的幽灵空白问题
            产生原因：
                行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
            解决方案：
                1.给行内块设置 vertical,值不为baseline即可，设置为middel、top、bottom即可。
                2.若父元素中只有一张图片，设置图片为 display:block;
                3.给父元素设置font-size:0。如果该行内块还有文本，则需要单独设置font-size。
-->


    <div class="parent">
        <span class = "box box1">行内元素</span>
        <img src="../Snipaste_2025-07-22_16-54-27.png">
    </div>
</body>
</html>